<template>
    <h1>APP 组件</h1>
    <hr />
    <h1>原价：{{ price }} <button @click="changePrice">修改原价</button></h1>
    <h1>会员价：{{ vipPrice }} <button @click="changeVipPrice">修改会员价</button></h1>
    <h1>超级会员价：{{ sVipPrice }}</h1>
</template>

<script setup>
import { ref, computed } from 'vue'

const price = ref(1000)

const vipPrice = computed({
    get () {
        return price.value / 2
    },
    set (val) {
        price.value = val * 2
    }
})

const sVipPrice = computed(() => {
    return price.value * 0.1
})

//修改原价
function changePrice () {
    price.value = 100
}

//修改VIP价格
function changeVipPrice () {
    vipPrice.value = 1000
}
</script>

<style>

</style>
